<template>
    <div class="recommendconfig">
        <view-box ref="viewBox">
            <section class="pnel pb30">
                <h6 class="title">阅读需支付彩豆数</h6>
                <dl class="taplist">
                    <dd @click="selectindex=index" v-for="(item,index) in selectitems"
                        :class="[selectindex===index?'selected':'']" :key="index">
                        {{item.name}}
                    </dd>
                </dl>
            </section>
            <section class="pnel label" v-if="selectindex!=0">
                <x-switch title="推荐不中返还彩豆" v-model="back"></x-switch>
            </section>
            <section class="pnel">
                <h6 class="title">推荐标题</h6>
                <input type="text" v-model="title" placeholder="标题10到40字，用户可见" class="settitle">
                <h6 class="title">推荐理由</h6>
                <textarea v-model="reason" placeholder="推荐理由至少100字  (付费后才可查看)" class="reason">

                </textarea>
            </section>
            <footer class="bottomop">
                <span>截止 {{endtime}}</span>
                <a href="javascript:;" @click="buySend">确定推荐</a>
            </footer>
        </view-box>
    </div>
</template>

<script>
    import Button from '../../components/Button.vue';
    import DomLoad from '../../components/DomLoad';
    import {ViewBox, XSwitch, Group} from 'vux'
    import {getMytoken} from '../../service/common';
    import {godPay} from '../../service/buy';
    import store2 from 'store2';
    export default {
        components: {
            myButton: Button,
            DomLoad,
            ViewBox,
            Group,
            XSwitch
        },
        data() {
            return {
                endtime: '',
                selectitems: [
                    {name: '免费', value: 0},
                    {name: '28豆', value: 28},
                    {name: '38豆', value: 38},
                    {name: '58豆', value: 58},
                    {name: '88豆', value: 88}],
                selectindex: 0,
                back: false,
                reason: '',
                title: ''
            };
        },
        created() {
            this.getEndTime();
        },
        computed: {},
        methods: {
            async buySend(){
                const {reason, title, back, selectindex, selectitems}=this;
                const {token}=await getMytoken();
                if(!token) {
                    this.$vux.toast.text('未登录');
                }
                if(title === '') {
                    this.$vux.toast.text('请输入标题');
                    return;
                }
                if(reason.length < 99) {
                    this.$vux.toast.text('推荐理由至少100字');
                    return;
                }
                if(selectindex === 0) {
                    this.back = false;
                }
                const baydate = store2('baydate');
                const senddata = {...baydate, reason, back, title, bean: selectitems[selectindex].value};
                const {data}= await godPay(token, senddata);
                if(data && data.code === 0) {
                    this.$router.push(`/matchs/recommendmatchdetails/${data.data.planId}`);
                }
                else{
                    this.$vux.toast.text(data.msg);
                }


            },
            async getEndTime(){
                this.endtime = store2('endtime');
            }
        }
    }
</script>
<style lang="less" rel="stylesheet/less">
    @import "../app";

    .recommendconfig {
        height: 100%;

        .pnel {
            background: #fff;
            margin-bottom: 20px;
            padding: 0 30px;
        }

        .title {
            line-height: 105px;
            font-size: @fz30;
        }

        .reason {
            width: 100%;
            font-size: @fz30;
            border: 1px solid @color12;
            text-indent: 20px;
            height: 260px;
            box-sizing: border-box;
            padding: 20px;
            margin-bottom: 30px;
        }
        .bottomop {
            height: 100px;
            border-top: 2px solid @color12;
            position: fixed;
            bottom: 0;
            width: 100%;
            box-sizing: border-box;
            background: #fcfcfc;
            display: flex;
            align-items: center;
            padding-left: 34px;
            color: @color3;
            span {
                flex: 1;
            }
            a {
                .setnormalcss(100px);
                background: @color22;
                color: #fff;
                font-size: @fz36;
                width: 212px;
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .taplist {
            display: flex;
            justify-content: space-around;
            padding-bottom: 44px;
            dd {
                width: 124px;
                height: 62px;
                box-sizing: border-box;
                background: #f2f2f2;
                color: @color3;
                .setnormalcss(62px);
                border-radius: 4px;
                &.selected {
                    background: #fff;
                    border: 1px solid @colororange;
                    color: @colororange;
                    position: relative;
                    box-sizing: border-box;
                    &:after {
                        content: ' ';
                        width: 40px;
                        height: 40px;
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        background: url(//common-1253410441.file.myqcloud.com/activityimg/20171211174631.png) no-repeat left bottom;
                        background-size: contain;
                    }
                }
            }
        }

        .settitle {
            height: 86px;
            box-sizing: border-box;
            border-radius: 4px;
            border: 1px solid @color12;
            display: block;
            width: 100%;
            text-indent: 20px;
            font-size: @fz30;
            margin-bottom: 40px;
        }

        .label {
            height: 110px;
            display: flex;
            .vux-x-switch {
                display: flex;
                flex: 1;
                padding: 0;
                align-items: center;
            }
            .weui-label {
                display: flex;
                flex: 1;
                align-items: center;
                font-size: 15px;
            }
            .weui-cell__bd {
                display: flex;
                flex: 1;
            }
        }
    }

</style>